<template>
  <div 
    class="custom-image-container"
    :style="containerStyle"
    :class="{ 'image-loading': isLoading }"
  >
    <img
      v-if="!error"
      ref="imageRef"
      :src="processedImageUrl"
      :alt="alt || 'Image'"
      :class="customClass"
      :style="imageStyle"
      @load="handleLoad"
      @error="handleError"
    />
    <div v-else class="image-error" :style="errorStyle">
      {{ errorText || '图片加载失败' }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { processImageUrl } from '../../utils/imageUtils';

// 定义组件属性
const props = defineProps<{
  src?: string;
  alt?: string;
  width?: string | number;
  height?: string | number;
  fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
  lazy?: boolean;
  errorText?: string;
  customClass?: string;
  class?: string;
}>();

// 定义组件事件
const emit = defineEmits<{
  (e: 'load', $event?: Event): void;
  (e: 'error', $event?: Event): void;
  (e: 'click', $event?: Event): void;
}>();

// 响应式数据
const imageRef = ref<HTMLImageElement>();
const isLoading = ref(true);
const error = ref(false);

// 计算处理后的图片URL
const processedImageUrl = computed(() => {
  return processImageUrl(props.src);
});

// 计算容器样式
const containerStyle = computed((): any => {
  return {
    width: props.width ? `${typeof props.width === 'number' ? `${props.width}px` : props.width}` : 'auto',
    height: props.height ? `${typeof props.height === 'number' ? `${props.height}px` : props.height}` : 'auto',
    position: 'relative' as const,
    overflow: 'hidden' as const
  };
});

// 计算图片样式
const imageStyle = computed((): any => {
  return {
    width: '100%',
    height: '100%',
    objectFit: props.fit || 'cover',
    display: isLoading.value ? 'none' : 'block',
    transition: 'opacity 0.3s ease'
  };
});

// 计算错误样式
const errorStyle = computed((): any => {
  return {
    display: 'flex' as const,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
    width: '100%',
    height: '100%',
    backgroundColor: '#f5f5f5',
    color: '#999',
    fontSize: '14px',
    border: '1px dashed #ddd',
    borderRadius: '4px'
  };
});

// 处理图片加载完成
const handleLoad = (event?: Event) => {
  isLoading.value = false;
  error.value = false;
  emit('load', event);
};

// 处理图片加载错误
const handleError = (event?: Event) => {
  isLoading.value = false;
  error.value = true;
  emit('error', event);
};

// 监听图片URL变化
watch(() => props.src, () => {
  isLoading.value = true;
  error.value = false;
});
</script>

<style scoped>
.custom-image-container {
  border-radius: 4px;
}

.image-loading {
  background-color: #f0f0f0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
  animation: loading 1s linear infinite;
}

@keyframes loading {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40px 40px;
  }
}

img {
  user-select: none;
  -webkit-user-drag: none;
}

.image-error {
  cursor: default;
}
</style>